<template>
<div class="screeBox" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
   <div class="screen_top">
     <div class="logo">
       <span class="imgBox" @click="goChooseBoard" v-focusable>
            <img src="~images/bigScreen/collectScreen/title.png"/>
       </span>
     </div>
     <span v-if="isChina" class="text" :class="{'textUS': isChina !== 'zh_CN'}">{{$t('bigScreen.koneTitle')}}</span>
     <div class="timeBox">
       <span class="time_text">{{timeText}}</span>
       <span class="time_imgBox" @click="chinaClick" v-focusable>
         <template v-if="isChina === 'zh_CN'"><img src="~images/bigScreen/collectScreen/enlish.png"/></template>
         <template v-else><img src="~images/bigScreen/collectScreen/china.png"/></template>
       </span>
     </div>
   </div>
  <div class="screen_main">
    <Row style="height: 100%;" class="main_row" :key="componentKey">
      <template v-for="item in dataList">
        <Col span="8" :key="item.title" class="main_item" style="height: 100%;">
          <collectScreenList  v-if="showList" :key="item.title" :listobj="item" :chartData="chartData" :isChina="isChina"/>
        </Col>
      </template>
    </Row>
  </div>
</div>
</template>

<script>
import collectScreenList from "@/components/collectScreenList";

export default {
  name: "collectScreen",
  components:{collectScreenList},
  data(){
    return{
      waterConfig:{
        waveHeight:18,
        waveNum:1,
        colors:['#017BDC','#23809F', '#2389A2' ,'#195762'],
        data: [],
        shape: 'round'
      },
      chartData:{},
      componentKey:0,
      isChina:'',
      dataList:[
        {zhCN:'马达工厂',enUS:'C M X',title:'CMX',listInfo:{}},
        {zhCN:'轿箱工厂' ,enUS:'C C A',title:'CCA',listInfo:{}},
        {zhCN:'电气工厂',enUS:'C E P',title:'CEP',listInfo:{}},
      ],
      showList:false,
      scaleNum:'',
      timeText:"",
      createTimeId:null
    }
  },
  beforeDestroy(){
    if (this.createTimeId){
      clearInterval(this.createTimeId);
    }
  },
  mounted(){
    this.isChina = localStorage.getItem('language')
    // this.createTimeId = setInterval(this.refreshTime, 1000);
    this.onresize()
    this.getTime()
    window.addEventListener('resize', this.onresize, false);
    let queryInfo = this.$route.query
    if (queryInfo && queryInfo.hierarchyCode) {
      this.getDataList(queryInfo.hierarchyCode)
      this.getReportQ(queryInfo.hierarchyCode)
    }
  },
  methods:{
    getTime(){
      this.axios({
        method: 'get',
        url: '/dms/statistical/getDateTime'
      }).then(res=>{
        if (this.createTimeId){
          clearInterval(this.createTimeId);
        }
        const dateInfo = res.data
        this.timeText = dateInfo
        let timeNum = Number(new Date(dateInfo).getTime())
        this.createTimeId = setInterval(() => {
          timeNum += 1000
          this.timeText = this.$moment(new Date(timeNum)).format('YYYY-MM-DD HH:mm:ss');
        }, 1000)
      })
    },
    goChooseBoard(){
      this.$router.push({ path: '/chooseBoard'})
    },
    getReportQ(hierarchyCode){
      this.axios({
        method: 'get',
        url: '/dms/factoryBoard/reportQ',
        params:{
          hierarchyCode:'UPB5IESF6HVNDSW',
          // hierarchyCode
        }
      }).then(res => {
        if(res.code === 200){
          this.chartData = res.data
        }
      })
    },
    getDataList(hierarchyCode){
      this.showList = false
      this.axios({
        method: 'get',
        url: '/dms/companyBoard/yield',
        params:{
          hierarchyCode
        }
      }).then(res => {
        if (res.code == 200) {
          if (res.data){
            Object.keys(res.data).forEach(val=>{
              for (let item of this.dataList){
                if (val === item.title){
                  item.listInfo = {
                    ...res.data[val],
                    waterConfig:{...this.waterConfig,data:[res.data[val].boardCompanyShiftVo.orderCloseRate]}
                  }
                }
              }
            })
            // this.getShift(hierarchyCode)
          }
        } else {
          this.$Message.error(({ content: res.msg, duration: 6, closable: true }));
        }
        this.showList = true
      })
    },
    // // 班次统计
    // getShift(hierarchyCode){
    //   this.axios({
    //     method: 'get',
    //     url: '/dms/companyBoard/shift',
    //     params:{
    //       hierarchyCode
    //     }
    //   }).then(res=>{
    //     console.log('当前数据')
    //     
    //   })
    // },
    chinaClick(){
      if (this.isChina === 'zh_CN'){
        this.isChina = 'en_US'
        window.localStorage.setItem('language','en_US')
      }else {
        this.isChina = 'zh_CN'
        window.localStorage.setItem('language','zh_CN')
      }
      this.$i18n.locale = this.isChina
      localStorage.setItem('language', this.isChina)
      this.componentKey += 1
    },
    refreshTime(){
      this.timeText = this.$moment(new Date()).format('YYYY-MM-DD | HH:mm:ss');
    },
    //计算缩放
    onresize(){
      const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
      const scaleW = Width < 1920 ? (Width /  1920) : 1;
      const scaleH = Height < 1080 ? (Height / 1080) : 1;
      this.scaleNum = scaleW > scaleH ? scaleH : scaleW
    },
  }
}
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
